import React, { useState, useRef } from 'react'
import { message, Tabs, Divider, Popconfirm } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table'
import { connect } from 'umi'
import { getHangList, checkCredentialHang, unVaildCredentialHang, credentialBpm } from '../service'
import moment from 'moment'
import CreateForm from './components/CreateForm'

const { TabPane } = Tabs

const TableList = () => {
  const actionRef = useRef()
  const actionRef2 = useRef()
  const actionRef3 = useRef()
  const actionRef4 = useRef()
  const [visible, setVisible] = useState(false)
  const [record, setRecord] = useState(null)
  const [operateType, setOperateType] = useState(null)
  const [statusSearch, setStatusSearch] = useState(false)

  const handleChangTabIndex = (key) => {
    if (key === '0') {
      actionRef.current && actionRef.current.reload()
      setStatusSearch(false)
    } else if (key === '1') {
      actionRef2.current && actionRef2.current.reload()
      setStatusSearch(false)
    } else if (key === '2') {
      actionRef3.current && actionRef3.current.reload()
      setStatusSearch(false)
    } else {
      actionRef4.current && actionRef4.current.reload()
      setStatusSearch(true)
    }
  }

  const handleCancel = () => {
    setVisible(false)
    setRecord(null)
  }

  const handleSubmit = (values) => {
    if (values.status !== 5) {
      if (operateType === 0) {
        checkCredentialHang(values).then(res => {
          if (res.flag) {
            message.success(`驳回成功！`)
          } else {
            message.error(res.error)
          }
          setVisible(false)
          actionRef.current.reload()
        })
      } else {
        credentialBpm(values.id).then(res => {
          if (res.flag) {
            message.success(`发起审核成功。`)
            window.open(res.data)
          } else {
            message.error(res.error)
          }
          setVisible(false)
          actionRef.current.reload()
        })
      }
    } else {
      unVaildCredentialHang(values).then(res => {
        if (res.flag) {
          message.success(`解除成功！`)
        } else {
          message.error(res.error)
        }
        setVisible(false)
        actionRef3.current.reload()
      })
    }
  }

  const queryDetails = (record, type) => {
    setOperateType(type)
    setVisible(true)
    setRecord(record)
  }
  /*
    const delCredential = (id) => {
      deleteCredential(id).then(res => {
        if (res.flag){
          message.success('资质删除成功！')
        }else {
          message.error(res.error)
        }
        actionRef.current.reload();
      })
    };*/

  const columns = [
    {
      title: '序号',
      render: (text, record, index) => `${index + 1}`,
      hideInSearch: true,
    },
    {
      title: '姓名',
      dataIndex: 'name',
    },
    /*{
      title: '证书编号',
      hideInSearch: true,
      dataIndex: 'credentialNo',
    },*/
    {
      title: '职称系列',
      hideInSearch: true,
      dataIndex: 'jobSeries',
    },
    {
      title: '证书级别',
      hideInSearch: true,
      dataIndex: 'credentialLevel',
    },
    {
      title: '资格名称',
      hideInSearch: true,
      dataIndex: 'credentialName',
    },
    {
      title: '授予时间',
      dataIndex: 'startTime',
      hideInSearch: true,
      render: (text) => {
        return text !== '-' && moment(text).format('YYYY-MM-DD')
      },
    },
    {
      title: '补贴开始发放时间',
      dataIndex: 'allowanceTime',
      hideInSearch: true,
      render: (text) => {
        return text !== '-' && moment(text).format('YYYY-MM-DD')
      },
    },
    {
      title: '补贴金额',
      hideInSearch: true,
      dataIndex: 'allowance',
    },
    {
      title: '挂靠状态',
      dataIndex: 'audit',
      hideInSearch: !statusSearch,
      valueEnum: {
        0: { text: '未审核', status: 'Default' },
        1: { text: '审核中', status: 'Processing' },
        2: { text: '已挂靠', status: 'Success' },
        4: { text: '解除中', status: 'Processing' },
        5: { text: '已解除', status: 'Error' },
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (item, record) => (
        /*record.audit === 1 || record.audit === 0 ? <>
            <a onClick={() => queryDetails(record, 1)}>审批</a>
            <Divider type="vertical"/>
            <a onClick={() => queryDetails(record, 0)}>驳回</a>
          </> :*/
        <>
          {
            record.audit === 4 ?
              <a onClick={() => queryDetails(record, 3)}>解除</a> :
              <a onClick={() => queryDetails(record, 2)}>详情</a>
          }
          {
            (record.audit === 1 || record.audit === 2 || record.audit === 4) && record.bpmUrl && <>
              <Divider type="vertical"/>
              <a onClick={() => window.open(record.bpmUrl)}>审批详情</a>
            </>
          }
        </>
      ),
    }
  ]

  return (
    <PageHeaderWrapper>
      <Tabs animated={false} defaultActiveKey="0" onChange={handleChangTabIndex}>
        <TabPane tab="待审核" key="0">
          <ProTable
            actionRef={actionRef}
            rowKey="id"
            request={(params) => getHangList(params, [0, 1])}
            columns={columns}
          />
        </TabPane>
        <TabPane tab="待解除" key="1">
          <ProTable
            actionRef={actionRef2}
            rowKey="id"
            request={(params) => getHangList(params, [4])}
            columns={columns}
          />
        </TabPane>
        <TabPane tab="已挂靠" key="2">
          <ProTable
            actionRef={actionRef3}
            rowKey="id"
            request={(params) => getHangList(params, [2])}
            columns={columns}
          />
        </TabPane>
        <TabPane tab="全部" key="3">
          <ProTable
            actionRef={actionRef4}
            rowKey="id"
            request={(params) => getHangList(params)}
            columns={columns}
          />
        </TabPane>
      </Tabs>
      <CreateForm
        operateType={operateType}
        visible={visible}
        record={record}
        onCancel={handleCancel}
        onSubmit={handleSubmit}
      />

    </PageHeaderWrapper>
  )
}

export default connect(() => ({}))(TableList)
